<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="${ctxStatic}/js/layer.js"></script>
<script src="${ctxStatic}/js/style.js"></script> 
<link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
<link rel="stylesheet" href="${ctxStatic}/css/list.css">
<style type="text/css">
 	/* no  */
    .tab-no{width: 60px}
  	/* 款式图片  */
    .tab-kstp{width: 130px}
</style>

<script type="text/javascript">
    $(document).ready(function() {
		$("#financeCategory").select2();
		searchListForm();
		
            $(".tabBox ul li").each(function(){
                var index=$(this).index();

                $(".tabBox ul li").eq(0).addClass("active");

                $(this).click(function(){

                    $(this).addClass("active").siblings().removeClass("active");
                    
                    $("#tabPageStatus").val($(this).val());
                    searchListForm();
                    
                    $(".tabBoxSm > .tabSm").eq(index).stop(true).show().siblings().stop(true).hide();
					
					var tableW = $(".tabBoxSm > .tabSm").eq(index).find('.tableHead').width();
					var tabodyH = $(".tabBoxSm > .tabSm").eq(index).find('.tableBody').height();
					var tableScrollH = $(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').height();
					if(tabodyH>tableScrollH){
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width',tableW + 18 + 'px')
					}else{
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width','inherit')
					}

                })

            })

        });
    
    // 检索方法
	function searchListForm() {
		var params = $("#searchForm").serialize();
		$("#activity_pane").showLoading();
		$.post("${ctx}/settlement/single/searchList",params,function(result) {
					var listHtml = result["finance"];
					var pageHtml = result["page"];
					$("#listHtml").html(listHtml);
					$("#paging").html(pageHtml);
					$("#activity_pane").hideLoading();
				}, 'json');
	}
	
	// 重置方法
	function clearParam() {
		$("#dateYear").val("");
		$("#dateMonth").val("");
		$("#financeCategory").val("");
		searchListForm();
	}
	
    $(document).keydown(function(event){
    	if(event.keyCode == 13){
    		searchListForm();
    	}
    }); 
</script>
</head>
<body>
<form id="searchForm" method="post">
<div class="listArea" id="activity_pane">
	<div class="listBg">
        <div class="searchArea clearfix">
            <div class="searchLeft clearfix">
            	<!--业务期间 -->
                <div class="searchInp clearfix">
                    <p>业务期间</p>
                    <input type="text" style="width: 70px;" id="dateYear" name="dateYear" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy',onpicked:null})">
                    <p style="width: 25px;left: 5px;position: relative;">年</p>
                    <input type="text" style="width: 70px;" id="dateMonth" name="dateMonth" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'MM',onpicked:null})">
                    <p style="width: 25px;left: 5px;position: relative;">月</p>
                </div>
                <!--业务类别 -->
                <c:set value="<%=ResourcesUtil.getConfig(\"finance_category\") %>" var="fCategoryList"/>
                <div class="searchInp clearfix">
                    <p>业务类别</p>
                    <select id="financeCategory" name="financeCategory" style="width: 120px;">
	                    <option value="">请选择</option>
	                    <c:forEach items="${fns:getDictList(fCategoryList) }" var="fCategory">
	                    	<option value="${fCategory.itemCode }-${fCategory.itemValue }">${fCategory.itemName }</option>
	                    </c:forEach>
                    </select>
                </div>
            </div>
            <div class="searchRight clearfix">
                <button type="button" onclick="searchListForm();"><spring:message code="commom_check"/></button>
                <button type="button" onclick = "clearParam()"><spring:message code="common_reset"/></button>
                <button type="button" onclick="popup('600px','400px','${ctx}/settlement/single/form')">新建</button>
            </div>
        </div>
    </div>
    <input type="hidden" id="tabPageStatus" name="tabPageStatus" value="0"/>
    <div class="tabBox">
        <ul class="clearfix">
        	<!-- 全部 -->
            <li class="active" value="0"><spring:message code="settlement_All"/></li>
            <!-- 待审核 -->
            <li value="1">待审核</li>
            <!-- 未通过 -->
            <li value="2">未通过</li>
            <!-- 审核未完成 -->
            <li value="3">审核未完成</li>
            <!-- 审核未全部完成-->
            <li value="4">未全部完成</li>
            <!-- 完成未入账 -->
            <li value="5">完成未入账</li>
            <!-- 完成已入账 -->
            <li value="6">完成已入账</li>
            
        </ul>
	</div>
    <div class="listBg tabPadding overflowX">
        <div class="tableArea">
            <div class="tableScrollSm" style = "height:650px;width: 1532px;overflow: auto;">
                <table cellpadding="0" class="tableHead" >
                    <thead>
                    <tr>
                        <th><p class="tab-no"><spring:message code="handBook_head_no"/></p></th>
                        <!-- 业务期间 -->
                        <th><p class="width-100px">业务期间</p></th>
                        <!-- 业务类别 -->
                        <th><p class="width-80px">业务类别</p></th>
                        <!-- 业务号 -->
                        <th><p class="width-180px">业务号</p></th>
                        <!-- 货币类别 -->
                        <th><p class="width-100px">货币类别</p></th>
                        <!-- 应付金额 -->
                        <th><p class="width-100px">应付金额</p></th>
                        <!-- 应收金额 -->
                        <th><p class="width-100px">应收金额</p></th>
                        <!-- 备注  -->
                        <th><p class="width-180px">备注</p></th>
                        <!-- 创建人员 -->
                        <th><p class="width-100px">创建人员</p></th>
                        <!-- 登陆日期 -->
                        <th><p class="width-100px">登陆日期</p></th>
                        <!-- 审核状态 -->
                        <th><p class="width-100px">审核状态</p></th>
                        <!-- 订单完成状态 -->
                        <th><p class="width-100px">订单完成状态</p></th>
                        <!-- 入账状态 -->
                        <th><p class="width-100px">入账状态</p></th>
                        <!-- 结算状态 -->
                        <th><p class="width-100px">结算状态</p></th>
                    </tr>
                    </thead>
                </table>
                <table cellpadding="0" class="tableBody">
                    <tbody id="listHtml">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div id = "paging" ></div>
</div>
</form>
</body>
</html>